<template>
  <div>
		<myheader></myheader>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品检索</h3>
				<div class="row">
					<div class="col-sm-6 col-md-3 col-product" v-for="(item,index) in goodslist" :key='index'>
						<figure>
							<img :src="'http://127.0.0.1:8000/static/upload/'+item.img" class="rounded-corners img-fluid" 	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item?id='+item.id">{{item.name}}</a></h4>
						<!-- html标签解析展示 -->
						  <div v-html="item.name"></div>
						
						<p><span class="emphasis">￥{{item.price}}</span></p>
					</div>
				</div>

				<div>
					<!-- 简单版分页容器 -->
					<Pagination @change="get_goods" v-model="pagination"></Pagination>
				</div>

			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader.vue'

export default {
  data () {
    return {
		//搜索关键词
		text:'',
		
		//分页器变量
		pagination:{
			//当前页
			page:1,
			//一页展示多少条数据
			size:4,
			//一共多少数据,从后端接口获取
			total:''
		},
		//商品列表
		goodslist:[],


      msg: "这是一个变量",
	  //轮播图图片
    }
  },
  mounted:function(){
		//接收三方参数
		var text = this.$route.query.text;
		this.text = text

		console.log('接受参数',this.text)

		// //判断
		// if(text.indexOf(' ')){
		// 	text = text.split(" ")
		// 	//格式转化
		// 	text = JSON.stringify(text)
		// }

		// this.text=text
		// console.log('转化',this.text)
		


	  this.get_goods()

	  
	},

  methods:{
	  //商品展示
	get_goods(){
	    this.axios.get('http://localhost:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size,text:this.text}})
      .then(a=>{

		  //设置搜索字体高亮
		  // for(let i=0;i<a.data.message.length;i++){
				// new RegExp声明正则匹配的变量。
			//   a.data.message[i]['name']=a.data.message[i]['name'].replace(new RegExp(this.text,'g'),'<span class="highlight">'+this.text+'</span>');

    
		  // }

		  console.log(a)
		  this.goodslist=a.data.message
		  this.pagination.total=a.data.total
		  

      })
    },





	  

     
  },
  components:{
	  	  'myheader':myheader
  }
}


</script>
 
<style>

.highlight{
  color:red;
}

</style>